<script>
  init({
    title: 'Vue Component',
    desc: 'Use Plugin: <a href="https://vuejs.org/" target="_blank">Vue.js</a> and multiple-select-vue.',
    links: ['multiple-select.min.css'],
    scripts: [
      'https://unpkg.com/vue@3/dist/vue.global.js',
      'multiple-select.min.js',
      'https://unpkg.com/multiple-select@2.2.0/dist/multiple-select-vue.umd.js'
    ]
  })
</script>

<div id="app">
  <div class="mb-3 row">
    <label class="col-sm-2">
      Options
    </label>

    <div class="col-sm-10">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" v-model="disabled">
        <label class="form-check-label">disabled</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" v-model="filter">
        <label class="form-check-label">filter</label>
      </div>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Single Select
    </label>

    <div class="col-sm-10">
      <multiple-select
        ref="my-select"
        v-model="value1"
        :disabled="disabled"
        width="100%"
        :options="options"
        :data="data"
      ></multiple-select>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Multiple Select
    </label>

    <div class="col-sm-10">
      <multiple-select
        ref="my-select"
        v-model="value2"
        multiple
        :disabled="disabled"
        width="100%"
        :options="options"
        :data="data"
      ></multiple-select>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Methods
    </label>

    <div class="col-sm-10">
      <button class="btn btn-secondary" @click="getSelects">getSelects</button>
    </div>
  </div>
</div>

<script>
  function mounted() {
    const { computed, createApp, ref, useTemplateRef } = window.Vue
    const app = createApp({
      setup () {
        const value1 = ref(1)
        const value2 = ref([1])
        const disabled = ref(false)
        const filter = ref(false)
        const select = useTemplateRef('my-select')

        const options = computed(() => ({
          filter: filter.value
        }))
        const data = [
          {
            text: 'January',
            value: 1
          },
          {
            text: 'February',
            value: 2
          },
          {
            text: 'March',
            value: 3
          },
          {
            text: 'April',
            value: 4
          },
          {
            text: 'May',
            value: 5
          },
          {
            text: 'June',
            value: 6
          }
        ]

        const getSelects = () => {
          alert(select.value.getSelects())
        }

        return {
          value1,
          value2,
          disabled,
          filter,
          options,
          data,
          getSelects
        }
      }
    })

    app.component('MultipleSelect', window.MultipleSelect)
    app.mount('#app')
  }
</script>
